<template>
  <div class="dialoge">
    <div class="report">
      <div class="nav">
        <div><van-icon name="arrow-left" @click="$router.go(-1)" /></div>
        <div class="title">报告路况</div>
      </div>
      <!-- 父组件把data传递过去 -->
      <vant-report :data="data"></vant-report>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VantReport from '../../components/VantReport.vue'
import { data } from './event-data'

//vue3不用写export default
//setup语法糖可以自动返回const的值,所以<script setup>里面不用写return
</script>

<style scoped>
.report {
  font-size: 20px;
  padding: 10px 10px 50px 5px;
  position: relative;
  border-radius: 20px;
  text-align: center;
  line-height: 0.5rem;
}
.report .nav {
  display: flex;
  position: absolute;
  top: 35px;
  left: 20px;
  height: 30px;
  line-height: 30px;
  width: 350px;
}
.report .title {
  position: absolute;
  left: 38%;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
}
</style>
